<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ElementPlus 管理后台</title>
    <!-- 引入 ElementPlus CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.css"
    />
    <!-- 引入 Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.11/dist/vue.global.prod.js"></script>
    <!-- 引入 ElementPlus -->
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.8/dist/index.full.min.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container class="full-height">
        <!-- 侧边栏 -->
        <el-aside class="sidebar" :width="sidebarCollapsed ? '64px' : '200px'">
          <div class="logo" :class="{ 'collapsed': sidebarCollapsed }">
            <img
              src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/1c7588155c374ef6a8afa41ceb2d1db1~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1754130339&x-signature=J3AFMXg8cBCDRYXY2BXW4TFqVak%3D"
              alt="管理系统Logo"
              class="logo-image"
            />
            <span class="logo-text" v-show="!sidebarCollapsed">管理系统</span>
          </div>

          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            :collapse="sidebarCollapsed"
            router=""
            background-color="#1e293b"
            text-color="#fff"
            active-text-color="#409eff"
          >
            <el-sub-menu index="dashboard">
              <template #title="">
                <i class="fa fa-dashboard"></i>
                <span>仪表盘</span>
              </template>
              <el-menu-item index="dashboard/overview">
                <span>概览</span>
              </el-menu-item>
              <el-menu-item index="dashboard/statistics">
                <span>统计</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="users">
              <template #title="">
                <i class="fa fa-users"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="users/list">
                <span>用户列表</span>
              </el-menu-item>
              <el-menu-item index="users/roles">
                <span>角色权限</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="products">
              <template #title="">
                <i class="fa fa-shopping-bag"></i>
                <span>产品管理</span>
              </template>
              <el-menu-item index="products/list">
                <span>产品列表</span>
              </el-menu-item>
              <el-menu-item index="products/categories">
                <span>分类管理</span>
              </el-menu-item>
              <el-menu-item index="products/add">
                <span>添加产品</span>
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item index="orders">
              <template #title="">
                <i class="fa fa-file-text-o"></i>
                <span>订单管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="settings">
              <template #title="">
                <i class="fa fa-cog"></i>
                <span>系统设置</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-container>
          <!-- 顶部导航栏 -->
          <el-header class="header">
            <el-row :gutter="24" class="header-container">
              <el-col :span="2">
                <el-button
                  class="toggle-btn"
                  type="text"
                  @click="toggleSidebar"
                >
                  <i class="fa fa-bars"></i>
                </el-button>
              </el-col>
              <el-col :span="18">
                <div class="search-container">
                  <el-input
                    v-model="searchQuery"
                    placeholder="搜索..."
                    prefix-icon="Search"
                    clearable=""
                    @keyup.enter="handleSearch"
                  ></el-input>
                </div>
              </el-col>
              <el-col :span="4" class="user-info-container">
                <div class="user-info">
                  <el-dropdown trigger="click">
                    <span
                      class="el-dropdown-link user-profile"
                      style="justify-content: flex-end"
                    >
                      <img
                        src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/85d47e0e5daa416289cc266cbc9c4d90~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1754130366&x-signature=%2F8bx%2Bke%2BYj2qUSuT00C9i32cqFo%3D"
                        alt="用户头像"
                        class="avatar"
                        style="width: 50px; height: 50px"
                      />
                      <span class="username" v-show="!sidebarCollapsed"
                        >管理员</span
                      >
                      <i class="fa fa-caret-down ml-2"></i>
                    </span>
                    <template #dropdown="">
                      <el-dropdown-menu>
                        <el-dropdown-item>
                          <i class="fa fa-user mr-2"></i>个人信息
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <i class="fa fa-cog mr-2"></i>账号设置
                        </el-dropdown-item>
                        <el-dropdown-item divided="">
                          <i class="fa fa-sign-out mr-2"></i>退出登录
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </el-col>
            </el-row>
          </el-header>

          <!-- 内容区域 -->
          <el-main class="main-content">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="mb-4">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>仪表盘</el-breadcrumb-item>
              <el-breadcrumb-item>概览</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="content-card">
              <el-card class="mb-6">
                <template #header="">
                  <div class="clearfix">
                    <span>数据概览</span>
                    <el-button style="float: right; padding: 3px 0" type="text"
                      >查看更多</el-button
                    >
                  </div>
                </template>

                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-icon bg-primary">
                        <i class="fa fa-users"></i>
                      </div>
                      <div class="stat-content">
                        <p class="stat-title">总用户数</p>
                        <p class="stat-value">12,589</p>
                        <p class="stat-trend text-success">
                          <i class="fa fa-arrow-up"></i> 12.5%
                        </p>
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-icon bg-success">
                        <i class="fa fa-shopping-cart"></i>
                      </div>
                      <div class="stat-content">
                        <p class="stat-title">总订单数</p>
                        <p class="stat-value">8,352</p>
                        <p class="stat-trend text-success">
                          <i class="fa fa-arrow-up"></i> 8.2%
                        </p>
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-icon bg-warning">
                        <i class="fa fa-line-chart"></i>
                      </div>
                      <div class="stat-content">
                        <p class="stat-title">销售额</p>
                        <p class="stat-value">¥1,258,630</p>
                        <p class="stat-trend text-success">
                          <i class="fa fa-arrow-up"></i> 18.9%
                        </p>
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-icon bg-danger">
                        <i class="fa fa-comments"></i>
                      </div>
                      <div class="stat-content">
                        <p class="stat-title">新消息</p>
                        <p class="stat-value">158</p>
                        <p class="stat-trend text-danger">
                          <i class="fa fa-arrow-down"></i> 3.1%
                        </p>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-card>

              <el-row :gutter="20">
                <el-col :span="16">
                  <el-card>
                    <template #header="">
                      <span>销售趋势</span>
                    </template>
                    <div class="chart-container">
                      <canvas id="salesChart" height="250"></canvas>
                    </div>
                  </el-card>
                </el-col>

                <el-col :span="8">
                  <el-card>
                    <template #header="">
                      <span>订单状态</span>
                    </template>
                    <div class="chart-container">
                      <canvas id="orderStatusChart" height="250"></canvas>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <el-row :gutter="20" class="mt-6">
                <el-col :span="12">
                  <el-card>
                    <template #header="">
                      <div class="clearfix">
                        <span>最近订单</span>
                        <el-button
                          style="float: right; padding: 3px 0"
                          type="text"
                          >查看全部</el-button
                        >
                      </div>
                    </template>

                    <el-table
                      :data="recentOrders"
                      stripe=""
                      border=""
                      size="small"
                    >
                      <el-table-column
                        prop="orderNo"
                        label="订单号"
                      ></el-table-column>
                      <el-table-column
                        prop="customer"
                        label="客户"
                      ></el-table-column>
                      <el-table-column
                        prop="amount"
                        label="金额"
                      ></el-table-column>
                      <el-table-column prop="status" label="状态">
                        <template #default="scope">
                          <el-tag
                            :type="scope.row.status === 'pending' ? 'warning' : 
                                 scope.row.status === 'paid' ? 'success' : 
                                 scope.row.status === 'shipped' ? 'info' : 'danger'"
                          >
                            {{ scope.row.statusText }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template #default="scope">
                          <el-button type="text" size="small">查看</el-button>
                          <el-button type="text" size="small">编辑</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>

                <el-col :span="12">
                  <el-card>
                    <template #header="">
                      <div class="clearfix">
                        <span>热门产品</span>
                        <el-button
                          style="float: right; padding: 3px 0"
                          type="text"
                          >查看全部</el-button
                        >
                      </div>
                    </template>

                    <el-table
                      :data="hotProducts"
                      stripe=""
                      border=""
                      size="small"
                    >
                      <el-table-column label="产品">
                        <template #default="scope">
                          <div class="product-info">
                            <img
                              :src="scope.row.image"
                              alt="产品图片"
                              class="product-image"
                            />
                            <span class="product-name"
                              >{{ scope.row.name }}</span
                            >
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="sales"
                        label="销量"
                      ></el-table-column>
                      <el-table-column
                        prop="revenue"
                        label="销售额"
                      ></el-table-column>
                      <el-table-column label="操作">
                        <template #default="scope">
                          <el-button type="text" size="small">查看</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-main>

          <!-- 底部 -->
          <el-footer class="footer">
            © 2025 ElementPlus 管理系统 - 版权所有
          </el-footer>
        </el-container>
      </el-container>
    </div>

    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <script>
      // 确保 DOM 加载完成后再执行
      document.addEventListener("DOMContentLoaded", function () {
        const { createApp, ref, onMounted } = Vue;

        createApp({
          setup() {
            const sidebarCollapsed = ref(false);
            const activeMenu = ref("dashboard/overview");
            const searchQuery = ref("");

            const recentOrders = ref([
              {
                orderNo: "ORD-20250701",
                customer: "张三",
                amount: "¥1,250.00",
                status: "paid",
                statusText: "已支付",
              },
              {
                orderNo: "ORD-20250702",
                customer: "李四",
                amount: "¥860.00",
                status: "shipped",
                statusText: "已发货",
              },
              {
                orderNo: "ORD-20250703",
                customer: "王五",
                amount: "¥2,450.00",
                status: "pending",
                statusText: "待支付",
              },
              {
                orderNo: "ORD-20250704",
                customer: "赵六",
                amount: "¥560.00",
                status: "completed",
                statusText: "已完成",
              },
              {
                orderNo: "ORD-20250705",
                customer: "钱七",
                amount: "¥1,890.00",
                status: "paid",
                statusText: "已支付",
              },
            ]);

            const hotProducts = ref([
              {
                name: "高级智能手表",
                image: "https://picsum.photos/40/40?random=product1",
                sales: 320,
                revenue: "¥96,000",
              },
              {
                name: "无线蓝牙耳机",
                image: "https://picsum.photos/40/40?random=product2",
                sales: 280,
                revenue: "¥56,000",
              },
              {
                name: "超薄笔记本电脑",
                image: "https://picsum.photos/40/40?random=product3",
                sales: 180,
                revenue: "¥270,000",
              },
              {
                name: "高清摄像头",
                image: "https://picsum.photos/40/40?random=product4",
                sales: 250,
                revenue: "¥37,500",
              },
              {
                name: "机械键盘",
                image: "https://picsum.photos/40/40?random=product5",
                sales: 190,
                revenue: "¥38,000",
              },
            ]);

            const toggleSidebar = () => {
              sidebarCollapsed.value = !sidebarCollapsed.value;
            };

            const handleSearch = () => {
              console.log("搜索:", searchQuery.value);
              // 这里可以添加搜索逻辑
            };

            onMounted(() => {
              // 销售趋势图表
              const salesCtx = document
                .getElementById("salesChart")
                .getContext("2d");
              new Chart(salesCtx, {
                type: "line",
                data: {
                  labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                  datasets: [
                    {
                      label: "销售额",
                      data: [65000, 59000, 80000, 81000, 90000, 110000, 125000],
                      borderColor: "#409eff",
                      backgroundColor: "rgba(64, 158, 255, 0.1)",
                      tension: 0.3,
                      fill: true,
                    },
                  ],
                },
                options: {
                  responsive: true,
                  plugins: {
                    legend: {
                      position: "top",
                    },
                  },
                },
              });

              // 订单状态图表
              const orderStatusCtx = document
                .getElementById("orderStatusChart")
                .getContext("2d");
              new Chart(orderStatusCtx, {
                type: "doughnut",
                data: {
                  labels: ["已完成", "已支付", "已发货", "待支付", "已取消"],
                  datasets: [
                    {
                      data: [35, 25, 20, 15, 5],
                      backgroundColor: [
                        "#67c23a",
                        "#409eff",
                        "#909399",
                        "#e6a23c",
                        "#f56c6c",
                      ],
                      borderWidth: 0,
                    },
                  ],
                },
                options: {
                  responsive: true,
                  plugins: {
                    legend: {
                      position: "bottom",
                    },
                  },
                },
              });
            });

            return {
              sidebarCollapsed,
              activeMenu,
              searchQuery,
              recentOrders,
              hotProducts,
              toggleSidebar,
              handleSearch,
            };
          },
        })
          .use(ElementPlus)
          .mount("#app");
      });
    </script>

    <style scoped="">
      .full-height {
        height: 100vh;
      }

      .sidebar {
        background-color: #1e293b;
        color: white;
      }

      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 10px;
      }

      .logo-image {
        height: 40px;
        margin-right: 10px;
      }

      .logo-text {
        font-size: 18px;
        font-weight: bold;
      }

      .logo.collapsed .logo-text {
        display: none;
      }

      .header {
        background-color: white;
        width: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      }

      .toggle-btn {
        color: #1e293b;
        font-size: 18px;
      }

      .header-container {
        width: 100%;
      }
      .search-container {
        max-width: 400px;
        margin: 0 auto;
        margin-left: 10px;
      }

      .user-info-container {
        display: flex;
        justify-content: flex-end;
        justify-self: flex-end;
        right: 5px;
      }

      .user-info {
        width: 100%;
        min-width: 200px;
        text-align: right;
      }

      .user-profile {
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: flex-end;
      }

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .main-content {
        padding: 20px;
        background-color: #f5f7fa;
        overflow-y: scroll;
      }
      .main-content::-webkit-scrollbar {
        display: none;
      }

      .content-card {
        max-width: 1920px;
        margin: 0 auto;
      }

      .footer {
        text-align: center;
        color: #909399;
        font-size: 14px;
        padding: 10px 0;
        border-top: 1px solid #ebeef5;
      }

      .stat-card {
        display: flex;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      }

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        margin-right: 15px;
      }

      .bg-primary {
        background-color: #409eff;
      }

      .bg-success {
        background-color: #67c23a;
      }

      .bg-warning {
        background-color: #e6a23c;
      }

      .bg-danger {
        background-color: #f56c6c;
      }

      .stat-content {
        flex: 1;
      }

      .stat-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 5px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 5px;
      }

      .stat-trend {
        font-size: 12px;
      }

      .text-success {
        color: #67c23a;
      }

      .text-danger {
        color: #f56c6c;
      }

      .chart-container {
        padding: 10px;
      }

      .product-info {
        display: flex;
        align-items: center;
      }

      .product-image {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        border-radius: 4px;
      }

      .product-name {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* 用户管理区域右对齐样式 */
      .user-profile {
        justify-content: flex-end;
      }

      /* 头像尺寸样式 */
      .avatar {
        width: 50px;
        height: 50px;
      }
      .username {
        width: 50px;
        text-align: right;
      }
      .el-sub-menu__title span,
      .el-menu-item span {
        margin-left: 5px;
      }
    </style>
  </body>
</html>
